<template>
  <!-- 构件搜索 -->
  <div class="ConstructSearch-container">
    <base-modal title="构件搜索" :width="560" cancelText="取消" okText="搜索" v-on="$listeners" @ok="handleOk" :confirmLoading="loading.isSaving">
      <div class="ConstructSearch-form-box">
        <div class="form-row">
          <div class="row-label">搜索内容：</div>
          <div class="row-value">
            <BaseInput class="mb10" placeholder="搜索关键字1" v-model="dataInfo.values[0]" />
            <BaseInput class="mb10" placeholder="搜索关键字2" v-model="dataInfo.values[1]" />
            <BaseInput placeholder="搜索关键字3" v-model="dataInfo.values[2]" />
          </div>
        </div>
        <div class="form-row">
          <div class="row-label">搜索类型：</div>
          <div class="row-value">
            <a-radio-group v-model="dataInfo.logical" :options="logicalOptions"></a-radio-group>
          </div>
        </div>
        <div class="form-row">
          <div class="row-label">搜索范围：</div>
          <div class="row-value">
            <a-checkbox-group v-model="dataInfo.ranges" :options="rangeGroupOptions"></a-checkbox-group>
          </div>
        </div>
        <div class="form-row">
          <div class="row-label">精确度：</div>
          <div class="row-value">
            <a-radio-group v-model="dataInfo.vague" :options="vagueOptions"></a-radio-group>
          </div>
        </div>
      </div>
    </base-modal>
  </div>
</template>

<script>
import BaseModal from '@/components/BaseModal'
import { getComponentInfo, getComponentInfoBatch } from '@/api/bimIntegrate'
export default {
  components: {
    BaseModal
  },
  props: {
    modelId: {
      type: String,
      default: ''
    },
    // 同时打开多个模型时传入参数 Array<Object>：[{ modelId: String, version: Number }]
    modelList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      loading: {
        isSaving: false
      },
      dataInfo: {
        vague: true, // true：模糊匹配，false：精确匹配
        type: '',
        logical: 'or', // and：多个值与逻辑查询，or：多个值或逻辑查询
        ranges: [0x1],
        values: ['', '', '']
      },
      vagueOptions: [
        {
          label: '模糊匹配',
          value: true
        },
        {
          label: '精确匹配',
          value: false
        }
      ],
      logicalOptions: [
        {
          label: '与',
          value: 'and'
        },
        {
          label: '或',
          value: 'or'
        }
      ],
      rangeGroupOptions: [
        {
          label: '构件名称',
          value: 0x1
        },
        {
          label: 'Revit ID',
          value: 0x2
        },
        {
          label: '属性值',
          value: 0x04
        }
      ]
    }
  },
  methods: {
    handleOk() {
      this.getComponentInfo()
    },
    async getComponentInfo() {
      if (this.loading.isSaving) return
      this.loading.isSaving = true
      const { vague, values, logical, ranges } = this.dataInfo
      const result = ranges.reduce((pre, cur) => {
        // 十六进制运算
        return pre | cur
      }, 0)
      const params = {
        modelId: this.modelId || void 0,
        queryModels: this.modelList,
        type: `0x${result.toString(16)}`,
        [this.modelList?.length ? 'values' : 'value']: values.filter(i => !!i), // 搜索关键字,批量用values，单个用value字段
        vague, // 是否模糊匹配
        property: false, // 是否返回属性
        logical // 查询逻辑
      }
      const api = this.modelList?.length ? getComponentInfoBatch : getComponentInfo // 批量查询或单个构件查询
      const [err, res] = await api(params)
      if (!err) {
        this.$emit('search:ok', res.data)
      }
      this.loading.isSaving = false
    }
  }
}
</script>

<style lang="less">
.ConstructSearch-container {
  .ConstructSearch-form-box {
    .form-row {
      display: flex;
      padding-bottom: 10px;
      .row-label {
        width: 5em;
        text-align: left;
      }
      .row-value {
        flex: 1;
        .ant-input + .ant-input {
          margin-top: 10px;
        }
        .ant-input {
          width: 100%;
        }
      }
    }
  }
}
.ConstructSearch-form-box {
  .form-row {
    display: flex;
    padding-bottom: 10px;
    .row-label {
      width: 5em;
      text-align: left;
    }
    .row-value {
      flex: 1;
      .ant-input + .ant-input {
        margin-top: 10px;
      }
      .ant-input {
        width: 100%;
      }
    }
  }
}
</style>